import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

export default class App extends Component {
	//初始化状态
	state = {
		todos:[
			{id:'001',name:'抽烟',done:true},
			{id:'002',name:'喝酒',done:false},
			{id:'003',name:'烫头',done:true},
		]
	}
	render() {
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List 
						todos={this.state.todos} 
						updateTodo={this.updateTodo} 
						deleteTodo={this.deleteTodo}
					/>
					<Footer 
						todos={this.state.todos}  
						deleteAllDoneTodo={this.deleteAllDoneTodo} 
						updateAllTodo={this.updateAllTodo}
					/>
				</div>
			</div>
		)
	}
	
	//更新一个todo
	updateTodo = (id,done)=> {
		//获取原来的todos
		const todos = this.state.todos
		//根据id和done值加工出来一个新的todos数组（并没有修改原state中的todos）
		const newTodos = todos.map((todoObj)=>{
			if(todoObj.id === id) return {...todoObj,done}
			return todoObj
		})
		//更新状态（用加工出来的新数组newTodos替换掉state中的todos）
		this.setState({todos:newTodos})

		
		/* 
				1.禁止通过非setState的形式去修改state中的数据(如下代码就是错误的)
				2.目前如下代码不会产生什么bug，但不被官方推荐，且在后期的redux中这么写就会出现bug
		*/
		// const todos = this.state.todos
		// todos.forEach((todoObj)=>{
		// 	if(todoObj.id === id) todoObj.done = done
		// })
		// console.log(todos)
	}

	//添加一个todo
	addTodo = (todoObj)=>{
		//获取原来的todos
		const {todos} = this.state
		//更新state
		this.setState({todos:[todoObj,...todos]})
	}

	//删除一个todo
	deleteTodo = (id)=>{
		const arr = this.state.todos.filter( todoObj => todoObj.id !== id )
		this.setState({todos:arr})
	}

	deleteAllDoneTodo = ()=>{
		//获取原状态
		const arr = this.state.todos.filter( todoObj => !todoObj.done)
		this.setState({todos:arr})
	}

	updateAllTodo = (done)=>{
		const arr = this.state.todos.map( todoObj => ({...todoObj,done}))
		this.setState({todos:arr})
	}

}
